<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../assets/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>我爱面试后台</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'>
    <meta name="viewport" content="width=device-width">

    <!-- Bootstrap core CSS     -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">

    <!--  Paper Dashboard CSS    -->
    <link href="../assets/css/amaze.css" rel="stylesheet">

    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="../assets/css/demo.css" rel="stylesheet">

    <!--     Fonts and icons     -->
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="../assets/css/font-muli.css" rel='stylesheet' type='text/css'>
    <link href="../assets/css/themify-icons.css" rel="stylesheet">

    <link href="../assets/vendors/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet">
    <link href="../assets/vendors/sweetalert/css/sweetalert2.min.css" rel="Stylesheet">

</head>

<body>
<div class="wrapper">
    <div class="sidebar" data-background-color="brown" data-active-color="danger">

        <div class="logo">
            <a href="#" class="simple-text">
                我爱面试后台
            </a>
        </div>
        <div class="logo logo-mini">
            <a href="#" class="simple-text">
                A
            </a>
        </div>
        <div class="sidebar-wrapper">
            <ul class="nav">
                <li class="active">
                    <a href="../index.html">
                        <i class="ti-panel"></i>
                        <p>仪表盘</p>
                    </a>
                </li>
                <li>
                    <a data-toggle="collapse" href="#forms" class="collapsed" aria-expanded="false">
                        <i class="ti-clipboard"></i>
                        <p>
                            文章管理
                            <b class="caret"></b>
                        </p>
                    </a>
                    <div class="collapse" id="forms" role="navigation" aria-expanded="false" style="height: 0px;">
                        <ul class="nav">
                            <li><a href="../management/publish_article.html">发布文章</a></li>
                            <li><a href="../management/select_article.html">文章列表</a></li>
                        </ul>
                    </div>
                </li>

                <li>
                    <a data-toggle="collapse" href="#forms1" class="collapsed" aria-expanded="false">
                        <i class="ti-view-list-alt"></i>
                        <p>
                            博客管理
                            <b class="caret"></b>
                        </p>
                    </a>
                    <div class="collapse" id="forms1" role="navigation" aria-expanded="false" style="height: 0px;">
                        <ul class="nav">
                            <li><a href="../management/classify_article.html">文章分类管理</a></li>
                            <li><a href="../management/label_article.html">文章标签管理</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-panel">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-minimize">
                    <button id="minimizeSidebar" class="btn btn-round btn-white btn-fill btn-just-icon">
                        <i class="ti-arrow-left"></i>
                    </button>
                </div>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"> 指示板 </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="ti-user"></i>
                                <p class="hidden-lg hidden-md">
                                    Notifications
                                    <b class="caret"></b>
                                </p>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">账户登录</a>
                                </li>
                                <li>
                                    <a href="#">注册账户</a>
                                </li>
                                <li>
                                    <a href="#" id="logout">退出登录</a>
                                </li>
                            </ul>
                        </li>


                        <li class="separator hidden-lg hidden-md"></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--            内容区域-->
        <div class="content">
            <div class="container-fluid" id="app">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="content">
                                <h4 class="title">文章列表</h4>
                                <div class="toolbar">
                                    <div class="content">
                                        <div id="button-dropdown" class="dropdown pull-left">
                                            <button type="button" class="btn btn-round btn-info dropdown-toggle"
                                                    data-toggle="dropdown" aria-expanded="false">
                                                <i class="ti-settings"></i>
                                                <span class="caret"></span>
                                                设置显示行数
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                <li>
                                                    <a href="javascript:void(0);" v-on:click="linesize_fun(10)">10</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" v-on:click="linesize_fun(20)">20</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" v-on:click="linesize_fun(30)">30</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>


                                    <fieldset>
                                        <div class="form-group">
                                            <div class="pull-right">
                                                <input type="text" class="form-control" name="head" id="head"
                                                       placeholder="依据文章名称进行搜索" v-on:change="select_name()">
                                            </div>
                                        </div>

                                    </fieldset>
                                </div>
                                <span class="material-datatables">
                                        <table id="datatables" class="table table-striped table-no-bordered table-hover"
                                               style="width:100%;cellspacing:0">
                                            <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>所属分类</th>
                                                <th>所属标签</th>
                                                <th>文章名称</th>
                                                <th class="hidden-xs  hidden-sm-inline-block">链接</th>
                                                <th class="hidden-xs  hidden-sm-inline-block">发布时间</th>
                                                <th class="text-right">工具</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            <tr v-for="(item, index) in artcles.list" v-bind:id="item.id">

                                                <td>{{index+1+((artcles.current_Page-1)*10)}}</td>
                                                <td>{{item.title_name}}</td>
                                                <td>{{item.catalogue_name}}</td>
                                                <td>{{item.head}}</td>
                                                <!--                                                http://xxxx/ 改成你服务器的域名-->
                                                <td class=" hidden-xs  hidden-sm-inline-block">
                                                       <a v-bind:href="'http://mianshi.huitoushian.cn/context.html?catalogueId='+item.id"
                                                          target="_blank">
                                                          <button class="btn btn-primary btn-round btn-fab btn-fab-mini">
                                                                 <i class="ti-heart"></i>
                                                         </button>
                                                        </a>
                                                </td>


                                                <td class=" hidden-xs  hidden-sm-inline-block">{{item.time}}</td>
                                                <td class="text-right">
                                                    <a v-bind:href="'./amend_article.html?article='+item.id"
                                                       class="btn btn-simple btn-warning btn-icon edit"><i
                                                            class="ti-pencil-alt"></i></a>
                                                    <a v-on:click="del(item.id)"
                                                       class="btn btn-simple btn-danger btn-icon remove"><i
                                                            class="ti-close"></i></a>
                                                </td>
                                            </tr>

                                            </tbody>
                                            <tfoot>
                                            <tr>
                                                <th>ID</th>
                                                <th>所属分类</th>
                                                <th>所属标签</th>
                                                <th>文章名称</th>
                                                <th class="hidden-xs  hidden-sm-inline-block">链接</th>
                                                <th class="hidden-xs  hidden-sm-inline-block">发布时间</th>
                                                <th class="text-right">工具</th>
                                            </tr>
                                            </tfoot>
                                        </table>



                                        <div>
                                            共{{artcles.page_Total__Seize}}页    每页显示{{artcles.page_Size}}行    当前第{{artcles.current_Page}}页
                                        </div>

                                        <ul class="pagination pagination-info  pull-right">
                                            <li>
                                                <a href="javascript:void(0);" v-on:click="  page_Up()"> prev</a>
                                            </li>

                                            <li v-for="(item, index) in  pagesize">
                                                <span style="background-color: #ffffff"
                                                      v-if="item===artcles.current_Page">
                                                    <a href="javascript:void(0);" v-on:click="  page_click_a(item)">{{item}}</a>
                                                </span>
                                            <span v-else>
                                                    <a href="javascript:void(0);" v-on:click="   page_click_a(item)">{{item}}</a>
                                                </span>

                                            </li>

                                            <li>
                                                <a href="javascript:void(0);" v-on:click="page_Dn()">next </a>
                                            </li>
                                        </ul>
                                    </span>
                            </div>
                            <!-- end content-->
                        </div>
                        <!--  end card  -->
                    </div>
                    <!-- end col-md-12 -->
                </div>

            </div>
        </div>
        <!--                脚部-->
        <footer class="footer">
            <div class="container-fluid">
                <nav class="pull-left">
                    <ul>
                        <li>
                            <a href="http://boke.huitoushian.cn" target="_blank">
                                我的博客
                            </a>
                        </li>
                    </ul>
                </nav>
                <p class="copyright pull-right">
                    &copy;
                    <script>
                        document.write(new Date().getFullYear())
                    </script>
                    <a href="http://www.17sucai.com/">胡安民</a>
                </p>
            </div>
        </footer>
    </div>
</div>

<script src="../../code/public_code.js"></script>
<!--   Core JS Files   -->
<script src="../assets/vendors/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../assets/vendors/jquery-ui-1.12.0/jquery-ui.js"></script>


<script src="../assets/vendors/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/vendors/material.min.js" type="text/javascript"></script>
<script src="../assets/vendors/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<!-- Forms Validations Plugin -->
<script src="../assets/vendors/jquery.validate.min.js"></script>
<!--  Plugin for Date Time Picker and Full Calendar Plugin-->
<script src="../assets/vendors/moment.min.js"></script>
<!--  Charts Plugin -->
<script src="../assets/vendors/chartist.min.js"></script>
<!--  Plugin for the Wizard -->
<script src="../assets/vendors/jquery.bootstrap-wizard.js"></script>
<!--  Notifications Plugin    -->
<script src="../assets/vendors/bootstrap-notify.js"></script>
<!-- DateTimePicker Plugin -->
<script src="../assets/vendors/bootstrap-datetimepicker.js"></script>
<!-- Vector Map plugin -->
<script src="../assets/vendors/jquery-jvectormap.js"></script>
<!-- Sliders Plugin -->
<script src="../assets/vendors/nouislider.min.js"></script>
<!-- Select Plugin -->
<script src="../assets/vendors/jquery.select-bootstrap.js"></script>
<!--  DataTables.net Plugin    -->
<script src="../assets/vendors/jquery.datatables.js"></script>
<!-- Sweet Alert 2 plugin -->
<script src="../assets/vendors/sweetalert/js/sweetalert2.min.js"></script>
<!--	Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="../assets/vendors/jasny-bootstrap.min.js"></script>
<!--  Full Calendar Plugin    -->
<script src="../assets/vendors/fullcalendar.min.js"></script>
<!-- TagsInput Plugin -->
<script src="../assets/vendors/jquery.tagsinput.js"></script>
<!-- Material Dashboard javascript methods -->
<script src="../assets/js/amaze.js"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/js/demo.js"></script>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="../assets/js/http_cdn.staticfile.org_vue-resource_1.5.1_vue-resource.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="../../code/js-cookie.js"></script>

<script>
    var login = getCookie("login")
    if (login == null) {
        location.href = "../user/login.html"
    }
</script>
<script>



    var example1 = new Vue({
        el: '#app',
        data: {
            artcles: {},
            linesize: 10,
            pagesize: [],
            size_one: 5

        },
        created() {
            this.init(1,10);

        },
        methods: {
            init:function (da1,da2,url) {
                if (url==undefined) {
                    url='http://' + http_ip + ':8083/feign_article/queryAll/' +da1 + '/'+da2 +'';
                }
                //发送get请求  获取全部文章
                this.$http.get(url).then(function (res) {
                    var artcles_v = $.parseJSON(res.bodyText)
                    this.page_click(artcles_v.current_Page)
                    //发送get请求  分类
                    this.$http.get('http://' + http_ip + ':8083/feign_title').then(function(res) {
                        var titles = res.data.data;
                        //发送get请求  标签
                        this.$http.get('http://' + http_ip + ':8083/feign_catalogue/all').then(function(res) {
                            for (var i = 0; i < titles.length; i++) {
                                for (var i1 = 0; i1 < res.body.data.length; i1++) {
                                    if (titles[i].id === res.body.data[i1].title_id) {
                                        for (let j = 0; j <  artcles_v.list.length; j++) {
                                            if (artcles_v.list[j].catalogue_id===res.body.data[i1].id) {
                                                artcles_v.list[j].title_name=titles[i].title_name;
                                                artcles_v.list[j].catalogue_name=res.body.data[i1].catalogue_name

                                            }
                                        }

                                    }

                                }


                            }

                            this.artcles=artcles_v;
                            console.log(  this.artcles);
                        }, function() {
                            console.log('请求失败处理');
                        });

                    }, function() {
                        console.log('请求失败处理');
                    });




                }, function () {
                    console.log('请求失败处理');
                });

            },
            del: function (id) {
                var r = confirm("是否确认删除");
                if (r === true) {

                    //发送get请求
                    this.$http.post('http://' + http_ip + ':8083/feign_article/del', {"id": id}).then(function (res) {
                        if (res.bodyText === "删除成功") {
                            alert(res.bodyText)
                            $("#" + id).hide()
                        } else {
                            alert("删除异常")
                        }
                    }, function () {
                        console.log('请求失败处理');
                    });
                }
            },
            page_Dn: function () {
                //发送get请求  下一页
                this.init(this.artcles.page_Dn,this.linesize);
            },
            page_Up: function () {
                //发送get请求  上一页
                this.init(this.artcles.page_Up,this.linesize);
            },
            linesize_fun: function (data) {
                // 指定行数的显示
                this.linesize = data
                this.init(this.artcles.current_Page,this.linesize);
            },
            page_click: function (data) {
                if (data === 1) {
                    this.pagesize = [];
                    this.pagesize.push(data)
                    this.pagesize.push(data + 1)
                    this.pagesize.push(data + 2)
                } else {
                    this.pagesize = [];
                    this.pagesize.push(data - 1)
                    this.pagesize.push(data)
                    this.pagesize.push(data + 1)
                }
            },
            page_click_a: function (data) {
                //发送get请求   点击指定页
                this.init(data,this.linesize);
            },
            select_name: function () {
                var head = $("#head").val()
                var url='http://' + http_ip + ':8083/feign_article/article/query_Name/1/' + this.linesize + '?head=' + head
                //发送get请求  分页数据 ( 最新文章)
                this.init(this.artcles.current_Page,this.linesize,url);
            },


        }
    })


    //注销登录
    $("#logout").click(function () {
        delCookie("login")

        location.reload()

    })

</script>


</body>
</html>
